{%extends "base.html"%}
{%block title%}
个人资料
{%endblock%}
{%block body%}
<script>
    var profile;

    $(document).ready(() => {

        profile = new Vue({
            el: "#profile",
            delimiters: ['{[', ']}'],
            mixins: [baseMixin],
            data: {
                done: false, data: null
            }, methods: {
                md5: hex_md5
            }
        });
        $.post("/api/get_user_profile", { uid: window.location.href.split("/").pop() }).done(ctx => {
            ctx = JSON.parse(ctx);
            if (ctx.code) {
                showErrorModal(ctx.message);
                return;
            }
            profile.data = ctx.data;
            profile.data.ac_problems.sort((x, y) => x - y);
            $("title").text(`${profile.data.username} - ${profile.data.id} - 用户资料 - {{APP_NAME}}`);
            profile.done = true;
            // profile.data.banned=true;
            console.log(profile.data);
        });
    });

</script>
<div style="top:10%;max-width: 1000px;" v-if="done" id="profile">
    <div class="ui grid" style="width: 100%">
        <div class="ui row">
            <div class="ui five wide column">
                <div class="ui card" style="width:100%">
                    <div class="image">
                        <img v-bind:src="'https://www.gravatar.com/avatar/'+md5(data.email)+'?s=200'">
                    </div>
                    <div class="content">
                        <div class="header">{[data.username]}</div>
                        <div class="meta">
                            <span class="date">注册于 {[data.register_time]}</span>
                        </div>
                        <div class="meta">
                            <span class="is-admin">{[data.group_name]}</span>
                        </div>

                    </div>
                    <div class="extra content" style="color:black">
                        <div>Rating: {[data.rating]}</div>
                        <div>Email: {[data.email]}</div>
                    </div>
                    <div class="extra content" v-if="data.banned">
                        <span style="color:red">此账户已被封禁</span>
                    </div>
                    <div class="extra content" v-if="data.managable||base.uid==data.id">
                        <a :href="'/profile_edit/'+data.id" style="color:black">编辑</a>

                    </div>
                </div>
                <h4 class="ui block attached header">
                    Rating历史
                </h4>
                <div class="ui bottom attached segment">
                    <div v-if="data.rating_history.length==0">这个人很懒，没参加过任何Rated比赛...</div>
                    <table class="ui very basic celled table" v-else>
                        <thead>
                            <tr>
                                <th>比赛</th>
                                <th>变化</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in data.rating_history">
                                <td><a :href="'/contest/'+item.contest_id">{[item.contest_name]}</a>
                                </td>
                                <td style="color:green" v-if="item.result>=0">+{[item.result]}
                                </td>
                                <td v-else style="color:red">-{[-item.result]}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <h4 class="ui block attached header">
                    通过题目
                </h4>
                <div class="ui bottom attached segment">
                    <div v-if="data.ac_problems.length==0">这个人很懒,还没有做过题...</div>
                    <span v-for="item in data.ac_problems" v-else><a :href="'/show_problem/'+item">{[item]} </a>
                    </span>
                </div>
            </div>
            <div class="ui eleven wide column">
                <div class="ui header">
                    <h1>{[data.username]}</h1>
                </div>
                <div v-html="makeHTML(data.description)" class="ui segment stacked" style="max-height: 1000px;"
                    v-if="data.description"></div>
                <div class="ui segment stacked" v-else style="height: 100%">这个人好懒...什么都没有写...</div>
            </div>
        </div>
    </div>
</div>
{%endblock%}